{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}
  
{{block 'head'}}
<link rel="stylesheet" href="/lib/datetimepicker/css/bootstrap-datetimepicker.css">
{{/block}}

{{block 'body'}}
<section class="container">
  {{include '../_partials/settings-nav.html'}}
  <div class="col-md-5">
    <form id="change_form">
      <div class="form-group">
        <label for="exampleInputEmail1">账号</label>
        <p class="form-control-static">{{ user.email }}</p>
        <input type="hidden" name="_id" value={{ user._id }} >
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">昵称</label>
        <input type="text" class="form-control" id="exampleInputPassword1" name="nickname" value="{{ user.nickname}}">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">介绍</label>
        <textarea class="form-control" rows="3" name="bio">{{user.bio}}</textarea>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">性别</label>
        <div>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio1" value="1" {{ user.gender == 1?"checked":""}}> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio2" value="0" {{ user.gender == 0?"checked":""}}> 女
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio3" value="-1" {{ user.gender == -1?"checked":""}}> 保密
          </label>
        </div>
      </div>
      <div class="form-group" >
        <label for="datetimepicker">生日</label>
        <input type="text" class="form-control form_datetime" id="datetimepicker " placeholder="" value="{{ user.birthday }}" autocomplete="off" name="birthday" >
      </div>
      <button type="submit" class="btn btn-success">保存</button>
    </form>
  </div>
  <div class="col-md-2 profile-avatar">
    <dl>
      <dt>头像设置</dt>
      <dd>
        <img class="avatar" width="150" height="150" src={{ user.avatar }} alt="">
        <div>
          <button class="btn btn-default" href="">Upload new picture</button>
        </div>
      </dd>
    </dl>
    <div class="hidden">
      <form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar">
      </form>
    </div>
  </div>
</section>
{{/block}}
{{block 'script'}}
<script src="/lib/datetimepicker/js/bootstrap-datetimepicker.js">
</script>
<script>
  $birthday = $(".form_datetime").val().substr(1,10);
  $(".form_datetime").val($birthday);
  $(".form_datetime").datetimepicker({
  format: 'yyyy-mm-dd',
  minView: 2,
  autoclose:true,
  initialDate: new Date
});

//点击 上传图片安钮  触发 正真的 上传 input 
 $(".profile-avatar button").on('click', function(){
   $(".profile-avatar input").trigger('click');
 });

//上传图片
$(".profile-avatar input").on('change', function(){
  var formData = new FormData($(".profile-avatar form")[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
               if(data.err_code === 0){
                $(".profile-avatar img").attr('src', data.filePath);
                $(".modal-content .modal-body").html(data.message);
                $("#myModal").trigger('click');
               } else if( data.err_code === 1) {
                $(".modal-content .modal-body").html(data.message);
                $("#myModal").trigger('click');
               }
        },
        error: function (err) {
                $(".modal-content .modal-body").html(err.message);
                $("#myModal").trigger('click');
        }
    });
});
//更改信息
$('#change_form').on('submit', function (e) {
      e.preventDefault()
      var formData = $(this).serialize()
      $.ajax({
        url: '/change',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          var err_code = data.err_code
          if (err_code === 0) {
      
            $(".modal-content .modal-body").html(data.message);
            $("#myModal").trigger('click');
          } else if (err_code === 1) {
            window.alert('邮箱或者密码错误')
          } else if (err_code === 500) {
            window.alert('服务器忙，请稍后重试！')
          }
        }
      })
    })
</script>
{{/block}}